import React from 'react'
import {Button, Form, Input, Radio, Row, DatePicker, Select, Col, Checkbox, message, Cascader} from 'antd';
import isMobile from '../../../constant/client-util'
import options from '../../../constant/cityData'
const Option = Select.Option
const {MonthPicker} = DatePicker
const RadioGroup = Radio.Group;
const formItemLayout = {
  labelCol: {
    span: 6
  },
  wrapperCol: {
    span: 16
  }
}
const MAINLAND_PHONE_REG = /^1(3|4|5|6|7|8|9)\d{9}$/
const HONGKANG_PHONE_REG = /^([5|6|8|9])\d{7}$/
const monthFormat = 'YYYY-MM';

class InformationComplete extends React.Component {
  state = {
    openOtherInput: false,
    other: ''
  }

  checkMobilePhone = (rule, value, callback) => {
    if (!value) {
      return callback()
    }
    return HONGKANG_PHONE_REG.test(value) || MAINLAND_PHONE_REG.test(value) ? callback() : callback(true)
  }

  getOther = (e) => {
    this.setState({
      other: e.target.value
    })
  }

  addOther = () => {
    this.setState({
      openOtherInput: !this.state.openOtherInput
    })
  }

  handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFieldsAndScroll((err, values) => {

      if (!err) {
        values = Object.assign(values, {
          schoolProvince: values.schoolProvince[0],
          schoolCity: values.schoolProvince[1]
        })
        if ('username' in values) {
          const user = {username: values.username, password: values.password}
          this.props.usernameLogin(user, () => {
            this.registerActivity(values)
          })
        } else {
          this.registerActivity(values)
        }
      }
    })
  }

  registerActivity = (values) => {
    const {openOtherInput, other} = this.state
    if (values.recuritMessage && openOtherInput) {
      values.recuritMessage[values.recuritMessage.indexOf('其他')] = '其他：' + other
    }

    this.props.joinActivity(values, () => {
      message.success('报名成功')
      if (isMobile()) {
        this.props.nextStep()
      } else {
        window.location.href = "https://school.thoughtworks.cn/learn/auth/login"
      }
    })
  }
  parse = () =>{
    let result
    if (options) {
      result = options.map(province => {
        let children
        if (province.children) {
          children = province.children.map(city => {
            return Object.assign({}, city, {label : city.label})
          })
        }
        return Object.assign({}, province, {label : province.label}, {children})
      });
    }

    return result
  }
  render() {
    const {getFieldDecorator} = this.props.form
    const {isRegister} = this.props
    return <Form onSubmit={this.handleSubmit}>
      {isRegister ? <span>
          <Form.Item
            {...formItemLayout}
            label='姓名/邮箱'>
            {getFieldDecorator('username', {
              rules: [{required: true, message: '请输入姓名/邮箱', whitespace: true}],
            })(
              <Input/>
            )}
          </Form.Item>
          <Form.Item
            {...formItemLayout}
            label="密码">
                {getFieldDecorator('password', {
                  rules: [{
                    required: true, message: '请输入密码',
                  }, {
                    validator: this.validateToNextPassword,
                  }],
                })(
                  <Input type="password"/>
                )}
          </Form.Item>
        </span>
        : ''
      }
      <Form.Item
        {...formItemLayout}
        label='性别'>
        {getFieldDecorator('gender', {
          rules: [{required: true, message: '请选择性别!'}],
        })(
          <RadioGroup>
            <Radio value='M'>男</Radio>
            <Radio value='F'>女</Radio>
          </RadioGroup>
        )}
      </Form.Item>
      <Form.Item
        {...formItemLayout}
        label='手机号'>
        {getFieldDecorator('mobilePhone', {
          rules: [{
            required: true,
            message: '手机号格式错误',
            validator: this.checkMobilePhone,
            whitespace: false
          }],
        })(
          <Input type='number'/>
        )}
      </Form.Item>
      <Form.Item  {...formItemLayout}
                 label={'所在省市'}>
        {getFieldDecorator('schoolProvince',{
          rules: [{required: true, message: '请选择学校所在的省市!' }]})(
          <Cascader options={this.parse()} onChange={this.onChange} placeholder=""/>
        )}
      </Form.Item>
      <Form.Item
        {...formItemLayout}
        label="学校"
      >
        {getFieldDecorator('school', {
          rules: [{
            required: true, message: '请输入学校名称',
          }],
        })(
          <Input/>
        )}
      </Form.Item>
      <Form.Item
        {...formItemLayout}
        label="学历"
      >
        {getFieldDecorator('degree', {
          rules: [{
            required: true, message: '请选择学历',
          }],
        })(
          <Select>
            <Option value="本科"> 本科</Option>
            <Option value="研究生"> 研究生</Option>
            <Option value="博士"> 博士</Option>
            <Option value="其他"> 其他</Option>
          </Select>
        )}
      </Form.Item>
      <Form.Item
        {...formItemLayout}
        label="专业"
      >
        {getFieldDecorator('major', {
          rules: [{
            required: true, message: '请输入专业',
          }],
        })(
          <Input/>
        )}
      </Form.Item>
      <Form.Item
        {...formItemLayout}
        label="入学时间"
      >
        {getFieldDecorator('entranceYear', {
          rules: [{
            required: true, message: '请选择入学时间',
          }],
        })(
          <MonthPicker placeholder="Select month" format={monthFormat}/>
        )}
      </Form.Item>
      <Form.Item
        {...formItemLayout}
        label="毕业年限"
      >
        {getFieldDecorator('graduationTime', {
          rules: [{
            required: true, message: '请选择毕业年限',
          }],
        })(
          <MonthPicker placeholder="Select month" format={monthFormat}/>
        )}
      </Form.Item>
      <Form.Item
        {...formItemLayout}
        label="参与活动城市"
      >
        {getFieldDecorator('joinCity', {
          rules: [{
            required: true, message: '请选择参与的活动城市',
          }],
        })(
          <Select>
            <Option value="北京"> 北京</Option>
            <Option value="深圳"> 深圳</Option>
            <Option value="西安"> 西安</Option>
            <Option value="武汉"> 武汉</Option>
            <Option value="成都"> 成都</Option>
          </Select>
        )}
      </Form.Item>
      <Form.Item
        label="你是从什么时候开始知道 ThoughtWorks"
      >
        {getFieldDecorator('whenHear')(
          <Select>
            <Option value="一个月内"> 一个月内</Option>
            <Option value="半年内"> 半年内</Option>
            <Option value="一年左右"> 一年左右</Option>
            <Option value="了解多年"> 了解多年</Option>
          </Select>
        )}
      </Form.Item>
      <Form.Item
        label="你后续希望接受来自 ThoughtWorks 的哪些信息"
      >
        {getFieldDecorator('recuritMessage')(
          <Checkbox.Group>
            <Row>
              <Col sm={24} lg={12} style={{marginBottom: 5}}><Checkbox value="招聘信息">招聘信息</Checkbox></Col>
              <Col sm={24} lg={12} style={{marginBottom: 5}}><Checkbox value="企业开放日">企业开放日</Checkbox></Col>
              <Col sm={24} lg={12} style={{marginBottom: 5}}><Checkbox value="编程等主题的校园活动">编程等主题的校园活动</Checkbox></Col>
              <Col sm={24} lg={12} style={{marginBottom: 5}}><Checkbox value="面经、笔经等学习资料">面经、笔经等学习资料</Checkbox></Col>
              <Col sm={24} lg={12} style={{marginBottom: 10}}><Checkbox value="行业技术趋势与洞见">行业技术趋势与洞见</Checkbox></Col>
            </Row>
            <Row>
              <Col sm={24} lg={4}><Checkbox value="其他" onClick={this.addOther}>其他</Checkbox></Col>
              {this.state.openOtherInput ?
                <Col sm={24} lg={10}><Input size='small' onChange={this.getOther}/></Col> : ''}
            </Row>
          </Checkbox.Group>
        )}
      </Form.Item>

      <Row type='flex' justify='center'>
        <Button type='primary' htmlType='submit' size='large'>完善信息并报名</Button>
      </Row>
    </Form>
  }
}

const InformationCompleteForm = Form.create()(InformationComplete);

export default InformationCompleteForm
